<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="never">
            <el-row>
                <i class="el-icon-search"></i>
                <span class="search-title">筛选条件</span>
            </el-row>
            <el-row class="row-margin">
                <el-form
                    :inline="true"
                    :model="requestSearch"
                    class="demo-form-inline"
                    ref="researchForm"
                    prop="categoryId"
                >
                    <el-form-item prop="communityName">
                        <el-select
                            placeholder="社区店"
                            v-model="requestSearch.communityName"
                            style="width:300px"
                        >
                            <el-option value="test"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="searchCondition1">
                        <el-input
                            placeholder="订单支付流水号"
                            v-model="requestSearch.searchCondition1"
                            style="width:300px"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="searchCondition2">
                        <el-input
                            placeholder="商品名称/团长名字/团长手机/消费者手机"
                            v-model="requestSearch.searchCondition2"
                            style="width:300px"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="delivery" label="发货时间段">
                        <el-date-picker
                            v-model="requestSearch.delivery"
                            type="datetimerange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item prop="Time" label="按下单时间段">
                        <el-date-picker
                            v-model="requestSearch.Time"
                            type="datetimerange"
                            range-separator="-"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item prop="search">
                        <el-row type="flex">
                            <el-button type="primary" @click="handleSearch" style="margin-left:10px"
                                >查询</el-button
                            >
                            <el-button @click="handleReset" style="margin-left:10px"
                                >重置</el-button
                            >
                        </el-row>
                    </el-form-item>
                </el-form>
            </el-row>
        </el-card>
        <div style="margin: 15px 0">
            <el-radio-group v-model="requestSearch.status" size="medium">
                <el-radio-button label="ALL">全部</el-radio-button>
                <el-radio-button label="WAIT_PAY">待付款</el-radio-button>
                <el-radio-button label="IN_STOCK">备货中</el-radio-button>
                <el-radio-button label="WAIT_TAKEOFF">待提货</el-radio-button>
                <el-radio-button label="SHUTDOWN">已关闭</el-radio-button>
                <el-radio-button label="REFUNDED">已退款</el-radio-button>
                <el-radio-button label="FINISHED">已完成</el-radio-button>
            </el-radio-group>
        </div>

        <order-table :orderList="orderList"></order-table>
        <!-- 分页 -->
        <el-row type="flex" justify="end" class="pagination">
            <el-pagination
                background
                layout="total, sizes,  prev, pager, next, jumper"
                @current-change="handleCurrentChange"
                :page-sizes="[5, 10, 15, 20]"
                @size-change="handleSizeChange"
                :page-size="requestSearch.pageSize"
                :total="pagiData.total"
                :current-page.sync="requestSearch.pageNum"
            ></el-pagination>
        </el-row>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getOrderList, getOrderDetail } from '@/api/order';
import orderTable from './component/orderTable';
import { formatDate } from '@/utils/date';
export default {
    name: 'orderTableIndex',
    components: { orderTable },
    mounted() {},
    data() {
        return {
            requestSearch: {
                pageNum: 1,
                pageSize: 5,
                status: 'ALL'
            },
            orderList: [],
            categoryList: [],

            pagiData: {
                total: 100,
                current: 1
            }
        };
    },
    created() {
        this._refresh(); //for pg
    },
    methods: {
        _refresh() {
            this.getTableList(this.requestSearch);
        }, // 获取列表， 更新分页
        getQueryData(queryData) {
            let clonequeryData = { ...queryData };
            if (clonequeryData.delivery) {
                clonequeryData.deliveryStartTime = formatDate(
                    clonequeryData.delivery[0],
                    'yyyy-MM-dd hh:mm:ss'
                );
                clonequeryData.deliveryEndTime = formatDate(
                    clonequeryData.delivery[1],
                    'yyyy-MM-dd hh:mm:ss'
                );
            }
            if (clonequeryData.Time) {
                clonequeryData.startTime = formatDate(
                    clonequeryData.Time[0],
                    'yyyy-MM-dd hh:mm:ss'
                );
                clonequeryData.endTime = formatDate(clonequeryData.Time[1], 'yyyy-MM-dd hh:mm:ss');
            }
            if (clonequeryData.status == 'ALL') {
                delete clonequeryData.status;
            }
            let keys = Object.keys(clonequeryData);
            keys.forEach(key => {
                if (!clonequeryData[key]) {
                    delete clonequeryData[key];
                }
            });
            return clonequeryData;
        },
        getTableList(queryData) {
            let clonequeryData = this.getQueryData(queryData);
            getOrderList(clonequeryData).then(res => {
                let resdata = res.data;
                if (resdata && resdata.success) {
                    this.orderList = resdata.data instanceof Array ? resdata.data : [];
                    this.pagiData.total = resdata.extra ? resdata.extra.total : 0;
                } else {
                    this.orderList = [];
                }
            });
        },
        // 重置分页
        handleSearch() {
            this.requestSearch.pageNum = 1;
            if (this.requestSearch.categoryId == null) {
                delete this.requestSearch['categoryId'];
            }
            if (this.requestSearch.nameOrCode == null) {
                delete this.requestSearch['nameOrCode'];
            }
            if (this.requestSearch.supplierId == null) {
                delete this.requestSearch['supplierId'];
            }
            this.getTableList(this.requestSearch);
        },
        // 重置页面， 包括搜索框，分页,
        handleReset() {
            this.$refs.researchForm.resetFields();
        },
        handleEdit(index, row) {
            this.$router.push(`update/${row.id}`); // go to
        },
        showSalesModal(index, row) {
            this.countSaleGoodsId(row.id);
            this.countSalesVisible = true;
        },
        handleCurrentChange(val) {
            this.requestSearch.pageNum = val;
            this.getTableList(this.requestSearch);
        },
        handleSizeChange(val) {
            this.requestSearch.pageNum = 1;
            this.requestSearch.pageSize = val;
            this.getTableList(this.requestSearch);
        }
    }
};
</script>
<style scoped lang="scss">
.search-title {
    font-size: 18px;
}
.pagination {
    margin: 15px 0;
}
.row-margin {
    margin: 15px 0;
}
</style>
